<template>
	<view style="padding-top: 25rpx;">
		<view class="vipHader">
			<image class="vipHader1" src="../../static/images/vipbg2.png" mode=""></image>
			<view class="vipHader2 flex">
				<image class="m-r-20" src="../../static/images/vipicon.png" mode=""></image>
				<view class="">{{title||'VIP会员'}}</view>
			</view>
			<view class="vipHader3 flex">
				<image :src="userInfo.avatar" mode=""></image>
				<view class="m-l-20">{{userInfo.levelinfo.name||''}} {{userInfo.levelinfo.end_time||''}}</view>
			</view>
		</view>
		<view class="flex_b moneyBox">
		<view class="moneyItem flex_c" v-for="(item,i) in Viptequan" :key="i" 
		:class="activeId==i?'activeType':''" @click="activeMoney(item,i)">
			<view class="moneyItem1">{{item.name}}</view>
			<view class="font-56 font-weight">{{item.num}}</view>
			<view class="font-24">{{item.unit}}</view>
			<view class="f-t font-24 font-weight">¥{{item.count||0}}/{{item.unit}}</view>
		</view>
		</view>
		<view class="font-32 m-l-30 font-weight">VIP特权</view>
		<view class="m-l-30">
			<view v-for="(item,index) in tequan" :key="index" class="vipItem flex m-t-30">
				<image :src="item.image" mode=""></image>
				<view class="m-l-20">
					<view class="font-weight">{{item.name}}</view>
					<view class="font-24 grey">{{item.desc}}</view>
				</view>
			</view>
		</view>
		<view class="bottom-mar" style="height: 200rpx;"></view>
		<view class="bomPosition">
			<button type="primary" @click="preserve" style="border-radius: 10rpx !important;">¥{{price||0}} 立即购买</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				vipList:['1','3','6'],
				activeId:0,
				Viptequan:[],
				title:'',
				price:'',
				id:'',
				tequan:[],
				userInfo:{},
				privilegeList:[
					{
						title:'无限滑卡',
						content:'每日不限次数划卡',
						image:require('../../static/images/vip1.png')
					},
					{
						title:'开心畅聊',
						content:'每日畅聊20人',
						image:require('../../static/images/vip2.png')
					},
					{
						title:'访客记录',
						content:'查看谁看过我',
						image:require('../../static/images/vip3.png')
					},
					{
						title:'反悔卡',
						content:'滑错返回',
						image:require('../../static/images/vip4.png')
					},
					{
						title:'谁关注我',
						content:'查看谁关注我',
						image:require('../../static/images/vip5.png')
					}
				]
			};
		},
		onLoad() {
			this.ViptequanFn()
			this.getUserInfo()
		},
		onShow() {
			
		},
		methods:{
			preserve() {
				uni.login({
					provider: 'weixin', //使用微信登录
					success: loginRes => {
					// this.code = loginRes.code
				
				this.$api.sendRequest({
					url:'/api/Viptequan/upgradation',
					data:{
						id:this.id,
						type:'wechat',
						code:loginRes.code
					},success:res=>{
						let data = res.data
						if(res.code==1) {
							uni.requestPayment({
								"provider": "wxpay",
								timeStamp: data.timeStamp, //后端返回的时间戳
								nonceStr: data.nonceStr, //后端返回的随机字符串
								package: data.package, //后端返回的prepay_id
								signType: data.signType, //后端签名算法,根据后端来,后端MD5这里即为MD5
								paySign: data.paySign, //后端返回的签名
								success: res => {
									uni.showModal({
										title: '提示',
										content: '支付成功',
										cancelText: '确定',
										showCancel: false,
										success: resA => {
											// uni.navigateBack()
											this.getUserInfo()
										}
									});
								},
								fail(e) {
									uni.showToast({
										title: '取消支付',
										icon: 'error'
									})
								}
							})
						}else {
							this.$refs.toast.show({
								type: 'default',
								message: res.msg,
								duration:1500
							})
						}
					}
				})
				
				
				}
				});
				
			},
			// 获取用户信息
			getUserInfo() {
				this.$api.sendRequest({
					url: '/api/user/userInfo',
					success: res => {
						this.userInfo = res.data
					}
				})
			},
			ViptequanFn() {
				this.$api.sendRequest({
					url:'/api/Viptequan/index',
					success:res=>{
						if(res.data.length) {
							this.Viptequan = res.data
							this.tequan = res.data[0].tequan
							this.title = res.data[0].name
							this.id = res.data[0].id
							this.price = res.data[0].count
						}
						
					}
				})
			},
			
			activeMoney(item,i) {
				this.activeId = i
				this.tequan = item.tequan
				this.title = item.name
				this.id = item.id
				this.price = item.price
			}
		}
	}
</script>

<style lang="scss" scoped>
	.vipItem {
		image {
			width: 80rpx;
			height: 80rpx;
		}
	}
	.activeType {
		opacity: 1 !important;
		border: 6rpx solid #ff5e0f !important;
		.moneyItem1 {
			background-color: #ff5e0f !important;
			color: #fff !important;
		}
	} 
	.moneyBox {
		padding: 28rpx;
		.moneyItem {
			width: 208rpx;
			height: 180rpx;
			border: 6rpx solid rgba(236,105,48,0.5);
			opacity: 1;
			border-radius: 16rpx;
			position: relative;
			align-items: center;
			padding-top: 40rpx;
			padding-bottom: 30rpx;
			opacity: 0.7;
			.moneyItem1 {
				position: absolute;
				top: -22rpx;
				left: 50%;
				margin-left: -64rpx;
				width: 128rpx;
				height: 44rpx;
				line-height: 44rpx;
				background: #fbe0d5;
				opacity: 1;
				border-radius: 8rpx;
				text-align: center;
				font-size: 24rpx;
				font-weight: 600;
				color: rgba(240,108,50,0.45);
			}
		}
	}
	
	.vipHader {
		width: 694rpx;
		height: 256rpx;
		position: relative;
		margin: 25rpx auto;
		margin-top: 0;
		
		.vipHader1 {
			width: 694rpx;
			height: 256rpx;
			position: absolute;
			left: 0;
			top: 0;
		}
		.vipHader2 {
			image {
				width: 58.64rpx;
				height: 50rpx;
			}
			position: absolute;
			top: 44rpx;
			left: 38rpx;
			view {
				font-size: 40rpx;
				font-family: PingFangSC-Medium;
				line-height: 54rpx;
				color: #FFE5B8;
				opacity: 1;
			}
		}
		.vipHader3 {
			position: absolute;
			bottom: 28rpx;
			left: 32rpx;
			image {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
				opacity: 1;
			}
			view {
				font-size: 24rpx;
				font-family: PingFangSC-Regular;
				line-height: 32rpx;
				color: #F8D394;
				opacity: 1;
			}
		}
	}
</style>
